<template>
  <el-breadcrumb separator="/" class="app-breadcrumb">
    <!-- 
      遍历当前路由链 $route.matched（含所有父级）
      注意：最后一项代表“当前页”，不需要跳转，所以 :to 给 null
    -->
    <el-breadcrumb-item
      v-for="(item, idx) in levelList"
      :key="idx"
      :to="idx === levelList.length - 1 ? null : { path: item.path }"
      >{{ item.meta.title }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script>
export default {
  name: "BreadCrumb",
  data() {
    return {
      levelList: [],
    };
  },
  watch: {
    //当路由发生变化（前进/后退/刷新）自动重新计算面包屑
    $route: {
      handler() {
        // this.$route.matched 包含当前路由完整匹配链
        this.levelList = this.$route.matched.filter(
          (r) => r.meta && r.meta.title
        );
      },
      // 立即监控
      immediate: true,
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped='less'>
.app-breadcrumb {
  line-height: 50px;
}
</style>